﻿<phone:PhoneApplicationPage
    x:Class="YouTube.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ViewModels="clr-namespace:YouTube.Model"
   
    xmlns:interact="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:behaviors="clr-namespace:Behaviors;assembly=Microsoft.WPAS.Common.Behaviors"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Landscape" Orientation="Landscape"
    mc:Ignorable="d" d:DesignHeight="480" d:DesignWidth="800" >

    <phone:PhoneApplicationPage.Resources>
        <ViewModels:VideoViewModel x:Key="ViewModel" d:IsDataSource="True"/>
        <ViewModels:PlayVideoViewModel x:Key="PlayVideoViewModel" d:IsDataSource="True"/>
    </phone:PhoneApplicationPage.Resources>

    <!--LayoutRoot contains the root grid where all other page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent" DataContext="{Binding Source={StaticResource ViewModel}}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="PlayControls"
                             >
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.5">
                        <VisualTransition.GeneratedEasingFunction>
                            <CubicEase EasingMode="EaseInOut"/>
                        </VisualTransition.GeneratedEasingFunction>
                    </VisualTransition>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Visible"/>
                <VisualState x:Name="Hidden">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="grid">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>0</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ControlsGrid" d:IsOptimized="True"/>
                        <DoubleAnimation Duration="0" To="246" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="ControlsGrid" d:IsOptimized="True"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!--ContentPanel - place additional content here-->
        <Grid x:Name="grid" Grid.Row="1" Background="{StaticResource Youtube_ForegroundBrush}">
            <Grid  Background="{StaticResource Youtube_ForegroundBrush}">
                <!-- this Grid is required to handle manipulation irrespective of the size of the MediaElement-->
                <MediaElement
                    x:Name="MediaPlayer"
                    
                    AutoPlay="False"
                    Volume="1" HorizontalAlignment="Center" VerticalAlignment="Center" />

                <Image x:Name="ThumbNail"
                       Stretch="UniformToFill" Visibility="Collapsed"
                       Source="{Binding Thumbnail}" />
            </Grid>

            <Grid x:Name="ControlsGrid"
                  HorizontalAlignment="Left" VerticalAlignment="Bottom"
                  Height="246" Width="800" RenderTransformOrigin="0.5,0.5"
                  Background="#7F2B2B2B"
                 >
                <Grid.RowDefinitions>
                    <RowDefinition Height="66"/>
                    <RowDefinition Height="90"/>
                    <RowDefinition Height="90"/>
                </Grid.RowDefinitions>
                <Grid.RenderTransform>
                    <CompositeTransform/>
                </Grid.RenderTransform>
                <TextBlock x:Name="VideoTitle" Margin="20,0,20,1" TextWrapping="NoWrap" Text="{Binding Title}" FontSize="30" Foreground="{StaticResource Youtube_BackgroundBrush}" FontFamily="Segoe WP SemiLight" VerticalAlignment="Center" />
                <Grid HorizontalAlignment="Left" Grid.Row="1" Width="800">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="94"/>
                        <ColumnDefinition Width="94"/>
                        <ColumnDefinition Width="94"/>
                        <ColumnDefinition Width="94"/>
                        <ColumnDefinition Width="94"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <Button x:Name="Rewind"
                         
                            Style="{StaticResource YouTubeButtonStyle}" 
                            Grid.Column="1" 
                            BorderBrush="{x:Null}">
                        <Image Source="/YouTubeLite;component/images/start of video button.png" 
                               HorizontalAlignment="Center" 
                               VerticalAlignment="Center" 
                               Width="70" 
                               Height="70"/>

                       
                    </Button>

                    <Button x:Name="Play" 
                           
                            Style="{StaticResource YouTubeButtonStyle}" 
                            Grid.Column="3" 
                            BorderBrush="{x:Null}"
                            Visibility="Collapsed" >
                        <Image Source="/YouTubeLite;component/images/play button.png" 
                               HorizontalAlignment="Center" 
                               VerticalAlignment="Center" 
                               Width="70" 
                               Height="70"/>
                    </Button>
                    <Button x:Name="Pause" 
                           
                            Style="{StaticResource YouTubeButtonStyle}" 
                            Grid.Column="3" 
                            BorderBrush="{x:Null}" >
                        <Image Source="/YouTubeLite;component/images/pause button.png" 
                               HorizontalAlignment="Center" 
                               VerticalAlignment="Center" 
                               Width="70" 
                               Height="70"/>
                    </Button>

                    <Button x:Name="Forward" 
                           
                            Style="{StaticResource YouTubeButtonStyle}" 
                            Grid.Column="5" 
                            BorderBrush="{x:Null}" >
                        <Image Source="/YouTubeLite;component/images/end of video button.png" 
                               HorizontalAlignment="Center" 
                               VerticalAlignment="Center" 
                               Width="70" 
                               Height="70"/>
                        
                    </Button>
                </Grid>

                <Grid Grid.Row="2" DataContext="{Binding Source={StaticResource PlayVideoViewModel}}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="5*" />
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Text="{Binding PositionAndDuration, Mode=OneWay}" VerticalAlignment="Center" Foreground="{StaticResource Youtube_BackgroundBrush}" Style="{StaticResource Body}" FontFamily="Segoe WP SemiLight" HorizontalAlignment="Right" />
                    <Grid Grid.Column="1" Margin="5,0,10,0">
                        <Rectangle x:Name="TotalDuration"
                                   Stroke="{StaticResource Youtube_SeekBarBrush}"
                                   VerticalAlignment="Center" HorizontalAlignment="Stretch" 
                                   Height="9"/>
                        <Rectangle x:Name="PlaybackPosition"
                                   Fill="{StaticResource Youtube_SeekBarBrush}" Stroke="Black"
                                   Width="0"  Height="9"
                                   VerticalAlignment="Center" HorizontalAlignment="Left" />
                    </Grid>
                    <TextBlock Grid.Column="0" Grid.ColumnSpan="2"
                               Text="{Binding Status, Mode=OneWay}"
                               VerticalAlignment="Top" HorizontalAlignment="Center"
                               Foreground="{StaticResource Youtube_BackgroundBrush}"
                               Style="{StaticResource Body}" FontFamily="Segoe WP SemiLight" />
                </Grid>
            </Grid>
            <TextBlock x:Name="ErrorMessage" VerticalAlignment="Center" HorizontalAlignment="Center" TextWrapping="Wrap" Text="{Binding Strings.PlayVideoPage_Loading, Mode=OneWay, Source={StaticResource LocalizedStrings}}" Visibility="Collapsed" Foreground="{StaticResource Youtube_BackgroundBrush}"/>
            <ProgressBar x:Name="ProgressBar" 
                Height="10" 
                Margin="0" 
                VerticalAlignment="Center" 
                HorizontalAlignment="Center" 
                Width="800" 
                Visibility="Collapsed" 
                Style="{StaticResource PerformanceProgressBar}"
            />
            <!--<TextBlock x:Name="DebugText" 
                       HorizontalAlignment="Right" 
                       TextWrapping="Wrap" 
                       VerticalAlignment="Top" 
                       Margin="0" 
                       Foreground="{StaticResource Youtube_BackgroundBrush}"/>
            -->
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>